<template>
  <el-dialog :title="info.title" :visible.sync="info.isShow">
    <el-form :model="form">
      <el-form-item label="活动名称" :label-width="formLabelWidth">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="活动期限" :label-width="formLabelWidth">
        <div class="block">
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            :default-time="['00:00:00', '23:59:59']"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="timestamp"
            @change="timeChange($event)"
          >
            <!-- value-format="yyyy-MM-dd" -->
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item label="一级分类" :label-width="formLabelWidth">
        <el-select
          v-model="form.first_cateid"
          placeholder="--请选择-"
          @change="changeCate"
        >
          <!-- 遍历分类名称 -->
          <el-option
            v-for="item in cates"
            :key="item.id"
            :label="item.catename"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类" :label-width="formLabelWidth">
        <el-select
          v-model="form.second_cateid"
          placeholder="--请选择-"
          @change="changeGoods"
        >
          <!-- 遍历二级分类 -->
          <el-option
            v-for="item in second_cate"
            :key="item.id"
            :label="item.catename"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择商品" :label-width="formLabelWidth">
        <el-select v-model="form.goodsid" placeholder="--请选择-">
          <!-- 遍历三级分类 -->
          <el-option
            v-for="item in goods"
            :key="item.id"
            :label="item.goodsname"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-switch
          v-model="form.status"
          active-color="blue"
          inactive-color="grey"
          :active-value="1"
          :inactive-value="2"
        ></el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirm" v-if="info.isAdd"
        >确 定</el-button
      >
      <el-button type="primary" @click="update" v-else>修 改</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { warningAlert, successAlert } from "../../../utils/alert";
import { oneGoods, secAdd, secOne, secUpdate } from "../../../request/api";
import { mapActions, mapGetters } from "vuex";
export default {
  props: ["info"],
  data() {
    return {
      form: {
        title: "", //顶级分类的pid
        begintime: "",
        endtime: "",
        first_cateid: "",
        second_cateid: "",
        goodsid: "",
        status: 1,
      },
      formLabelWidth: "70px",
      second_cate: [], //二级分类列表
      second_attrs: [], //规格属性列表
      goods: [],
      value1: "",
    };
  },
  computed: {
    ...mapGetters({
      cates: "cate/cate",
      good: "goodsManager/goods",
    }),
  },
  methods: {
    ...mapActions({
      cateListActions: "cate/cateListActions",
      specListActions: "goodsSpec/specListActions",
      goodsActions: "goodsManager/goodsActions",
      secListActions: "seckill/secListActions",
      secUpdateActions: "seckill/secUpdateActions",
    }),
    timeChange(e) {
      console.log(e);
      if (e) {
        this.form.endtime = e[1];
        this.form.begintime = e[0];
      }
      console.log(this.form);
      // let d=
      // let val1=value1[0];
      // let val2=value2[0];
    },
    cancel() {
      this.info.isShow = false;
      (this.form = {
        title: "", //顶级分类的pid
        begintime: "",
        endtime: "",
        first_cateid: "",
        second_cateid: "",
        goodsid: "",
        status: 1,
      }),
        (this.second_cate = []),
        (this.second_attrs = []);
      this.value1 = "";
    },
    // 级联
    changeCate() {
      // 清空二级分类的值
      this.form.second_cateid = "";
      // 1.获取下标
      let index = this.cates.findIndex(
        (item) => item.id === this.form.first_cateid
      );

      // 2.根据下标获取children下面的二级分类
      this.second_cate = this.cates[index].children;
      console.log(this.second_cate);
    },
    changeGoods() {
      let params = {
        cateid: this.form.second_cateid,
        type: this.form.first_cateid,
        size: 10,
        page: 1,
      };
      // console.log(params);

      oneGoods(params).then((res) => {
        this.goods = res.list.goodData;
      });
      // console.log(this.good);
      // this.form.goodsid = "";
      // let index = this.good.findIndex(
      //   (item) => item.second_cateid === this.form.second_cateid
      // );
      // this.goods = [];
      // if (index !== -1) {
      //   this.goods.push(this.good[index]);
      // }
    },
    confirm() {
      secAdd(this.form).then((res) => {
        if (res.code === 200) {
          successAlert(res.msg);
          // this.bannersActions();
          this.cancel();
          this.secListActions();
        }
      });
    },
    goDetail(id) {
      this.goodsActions();
      
      console.log("edit", id);
      secOne({ id }).then((res) => {
        if (res.code === 200) {
          this.form = res.list;
          this.form.id = id;
          console.log("form", this.form);


      // 1.获取下标
      let index = this.cates.findIndex(
        (item) => item.id === this.form.first_cateid
      );

      // 2.根据下标获取children下面的二级分类
      this.second_cate = this.cates[index].children;


          let params = {
            cateid: this.form.second_cateid,
            type: this.form.first_cateid,
            size: 10,
            page: 1,
          };
          // console.log(params);

          oneGoods(params).then((res) => {
            this.goods = res.list.goodData;
         
          });

          // let index = this.good.findIndex(
          //   (item) => item.second_cateid === this.form.second_cateid
          // );
          // console.log(index);
          // this.second_cate = [];
          // this.second_cate.push(this.good[index]);

          // this.second_cate[0].catename = this.second_cate[0].secondcatename;
          // console.log(this.second_cate[0]);
          // this.form.second_cateid = "";
          // console.log(this.cates);
          // let index="";
          //     let goodsList=[];
          // this.cates.forEach(item=>{
          //   if(item.children){
          //       item.children.forEach(i=>{
          //         goodsList.push(i)
          //       })
          //        index=goodsList.findIndex(j=>j.id===this.form.goodsid)
          //   }
          // })
          // console.log(goodsList);
          // this.second_cate=this.cates[index]
          // console.log("cates",this.cates);
          // console.log("form",this.form);
          // let index = this.cates.findIndex(
          //   (item) => item.id === this.form.first_cateid
          // );
          // console.log(index);
          // // 2.根据下标获取children下面的二级分类
          // this.second_cate = this.cates[index].children;
          // let index2 = this.second_cate.findIndex(
          //   (item) => item.id === this.form.second_cateid
          // );
          // this.goods = [];
          // if (index !== -1) {
          //   this.goods.push(this.good[index2]);
          // }
          // console.log(this.goods);
          let date1 = new Date(Number(res.list.begintime));
          let date2 = new Date(Number(res.list.endtime));
          this.value1 = [date1, date2];
          console.log(this.form);
        }
      });
    },
    update() {
      //  let date = new Date();
      // this.form.begintime=this.value1[0].getTime();
      // this.form.endtime=this.value1[1].getTime();

      console.log(this.form);
      let data = {
        id: this.form.id,
        title: this.form.title, //顶级分类的pid
        begintime: this.form.begintime,
        endtime: this.form.endtime,
        first_cateid: this.form.first_cateid,
        second_cateid: this.form.second_cateid,
        goodsid: this.form.goodsid,
        status: 1,
      };
      console.log(data);
      secUpdate(data).then((res) => {
        console.log(res);
        successAlert(res.msg);
        this.cancel();
        this.secListActions();
      });

      // this.secUpdateActions(this.form);
      // this.cancel();
      // this.secListActions();
    },
  },
  mounted() {
    this.cateListActions();
  },
};
</script>
<style scoped>
/* >>> 穿透,   穿过scoped局部作用于进入element-ui的样式 */
.avatar-uploader >>> .el-upload {
  border: 1px dashed #252323;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader >>> .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>